<template>
	<view class="login-container">
		<uni-icons type="contact-filled" size="100" color="#afafaf"></uni-icons>
		<!-- 为登录的button 按钮绑定 open-type="getUserInfo"属性,表示点击按钮时，希望获取用户的信息 -->
		<!-- 可以从 @getuserinfo 事件处理函数的形参中,获取到用户的基本信息 -->
		<button type="primary" class="btn-login" open-type="getUserInfo" @getuserinfo="getUserInfo">一键登录</button>
		<!-- <button type="primary" class="btn-login" @click="login">一键登录</button> -->
		<!-- <button class="btn-login" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button> -->
		<text class="tips-text">登录后尽享更多权益</text>
	</view>
	
</template>

<script>
	import { mapMutations,mapState } from 'vuex';
	export default {
		name:"my-login",
		data() {
			return {
			};
		},
		computed:{
			...mapState('m_user',['redirectInfo'])
		},
		methods:{
			...mapMutations('m_user',['updateUserInfo','updateToken','updateRedirectInfo']),  
			// getUserProfile(){ 
			// 	wx.getUserProfile({
			// 		desc:'用于完善资料',
			// 		success:(res)=>{
			// 			console.log(res) 
			// 			console.log('1112')
			// 		}
			// 	})
			// },
			    
			//用户授权之后,获取用户的基本信息
			//"{"nickName":"微信用户","gender":0,"language":"","city":"","province":"","country":"","avatarUrl":"https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132"}"
			getUserInfo(e){//e  返回的数据
				
				if(e.detail.errMsg === 'getUserInfo:fail auth deny') return uni.$showMsg('您取消了登录授权!')
				this.updateUserInfo(e.detail.userInfo)
				
				this.getToken(e.detail)
			},
			 async getToken(info){ //获取token的方法
				//获取code的值
				const res=await uni.login().catch(err=>err) 
				 
				// uni.login({
				//   provider: 'weixin', //使用微信登录
				//   success: function (loginRes) {
				//     console.log(loginRes.authResult);
				//   }
				// });
				//判断wx.login()是否调用成功
				if(res.errMsg!== 'login:ok') return uni.$showMsg('登录失败!')
				
				//准备参数
				const query={//创建生成一个新的数据对象
					code:res.code, //正常开发时，获取的code值，就可以请求自己的后台，拿到用户的信息
					encryptedData:info.encryptedData,
					iv:info.iv,
					rawData:info.rawData, 
					signature:info.signature
				}
				console.log(query)
				//====================以下请求必须有=============================================
				// const loginResult= await uni.$http.post('/api/public/v1/users/wxlogin',query)
				// console.log(loginResult.statusCode)
				
				// if(loginResult.statusCode !== 200){
				// 	return uni.showToast({
				// 		title:"登录失败!!",
				// 		duration:1500,
				// 		icon:'none' 
				// 	})
				// }
				//直接把token res.message.token保存到vuex中，这里用假数据 123456
				this.updateToken('123456')
				this.navigateBack()
				
				
				
				// uni.request({
				// 	url:'https://api-hmugo-web.itheima.net/api/public/v1/users/wxlogin',
				// 	method:'POST',
				// 	data:query,
				// 	header: {
				// 	        'content-type': 'application/json' // 设置请求头中的Content-Type为JSON格式
				// 	    },
				// 		success: (res) => {
				// 			console.log(res)
				// 			//直接把token res.message.token保存到vuex中，这里用假数据 123456
				// 			//如果返回的数据是真正的数据，就可以用，但 code在这个后台不被接受，应该是后台定死了
				// 			this.updateToken('123456')
				// 			this.navigateBack()
				// 		},
				// 		fail: (res) => {
				// 			uni.$showMsg('登录失败～')
				// 		},
				// 		complete: () => {
							
				// 		}
				// })
				
				
				
				//  uni.login({
				// 	success: (res) => {
				// 		//其实通过uni.login()拿到code后直接请求自己后台，获取用户信息然后进行渲染就可以了，后面的逻辑可以不用
				// 		console.log(res.code)//正常是通过这个code请求自己后台，后台把用户信息返回，进行渲染
						
				// 		uni.request({
				// 			url:'https://api.weixin.qq.com/sns/jscode2session?appid=wxbca89ba98d75c6dd&secret=1d8ebd0f78eded073a76b40a3d5969a8&js_code='+res.code+"&grant_type=authorization_code",
				// 			method:'GET',
				// 			success:(res)=>{//获取openid  appid wxbca89ba98d75c6dd 密钥：1d8ebd0f78eded073a76b40a3d5969a8
				// 				console.log(res) 
								
				// 			},
				// 			fail: (res) => {
								
				// 			}
				// 		})
				// 	},
				// 	fail: () => {
				// 		uni.$showMsg('登录失败!')
				// 	},
				// 	complete: () => {
						
				// 	}
				// })
			},
			navigateBack(){//重新返回购物车页面
				if(this.redirectInfo &&this.redirectInfo.openType === 'switchTab'){
					uni.switchTab({
						url:this.redirectInfo.from,
						complete: () => {
							this.updateRedirectInfo(null)
						}
					})
				}
			}
			
		}
	}
</script>

<style lang="scss">
.login-container{
	height: 750rpx;
	background-color: #F8F8F8;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	
	position: relative;
	overflow: hidden;
	&::after{//尾元素，登录模块底部白色半圆弧形
		content: '';
		display: block;
		width: 100%;
		height: 40px;
		background-color: #ffffff;
		position: absolute;//固定位置
		bottom: 0;
		left: 0;
		border-radius: 100%;
		transform: translateY(50%);//向下移动自身高度的50%
	}
	.contact-filled{}
	.btn-login{
		background-color: #c00000;
		width: 90%;
		margin: 15px 0;
		border-radius: 100px;
	}
	.tips-text{
		font-size: 12px;
		color: gray;
	}
}
</style>